<template>
  <div class="app-container">
    <!--代理商管理头部展示区-->
    <div class="top">
      <el-button
        type="primary"
        round
        style="width: 124px; height: 32px; margin-right: 10px"
        @click="disDialog('add')"
      >
        创建代理商
      </el-button>
      <el-button
        :disabled="clickDisable"
        type="primary"
        round
        style="width: 124px; height: 32px; margin-right: 10px"
        @click="disDialog('edit')"
      >
        编辑代理商
      </el-button>
      <el-button
        :disabled="clickDisable"
        type="primary"
        round
        style="width: 124px; height: 32px; margin-right: 10px"
        @click="disDialog('stop')"
      >
        暂停合作
      </el-button>
      <el-button
        :disabled="clickDisable"
        type="primary"
        round
        style="width: 124px; height: 32px; margin-right: 10px"
        @click="disDialog('contract')"
      >
        新增合同
      </el-button>
      <el-button
        :disabled="deleteDisable"
        type="primary"
        round
        style="width: 124px; height: 32px; margin-right: 10px"
        @click="disDialog('delete')"
      >
        删除代理商
      </el-button>
      <div>
        <el-input
          style="width: 200px; height: 36px; margin: 30px 10px 0px 0px"
          placeholder="代理商编号"
          suffix-icon="el-icon-search"
          v-model="crud.query.id"
        >
        </el-input>
        <el-input
          style="width: 200px; height: 36px; margin: 30px 10px 0px 0px"
          placeholder="代理商名称"
          suffix-icon="el-icon-search"
          v-model="crud.query.agentName"
        >
        </el-input>
        <el-select v-model="crud.query.status" placeholder="合作状态">
          <el-option
            v-for="item in groupStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="crud.query.createDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="创建日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="center">
      <el-button
        type="primary"
        round
        style="width: 120px; height: 36px; font-size: 18px"
        @click="crud.toQuery"
        >搜索</el-button
      >
      <el-button
        round
        style="width: 120px; height: 36px; font-size: 18px"
        @click="crud.doExport"
        >导出</el-button
      >
      <el-button round style="width: 68px; height: 36px; font-size: 18px"
        >列</el-button
      >
    </div>
    <div class="bottom">
      <el-table
        ref="table"
        :data="crud.data"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="代理商编号"></el-table-column>
        <el-table-column prop="agentName" width="150" label="代理商名称">
          <template slot-scope="scope">
            <a
              style="color: #719dc9; text-decoration: underline"
              @click="blocDetail(scope.row)"
              >{{ scope.row.agentName }}</a
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="clincCount"
          label="代理商诊所数量"
        ></el-table-column>

        <el-table-column
          prop="doctorCount"
          label="旗下医生数量"
        ></el-table-column>
        <el-table-column
          prop="patientCount"
          label="旗下患者数量"
        ></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>
        <el-table-column prop="ProductRules" width="100" label="合作状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">合作</span>
            <span v-else>暂停合作</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination></pagination>
    </div>
    <el-dialog
      class="operDocterAdminDialog"
      :append-to-body="true"
      :title="title"
      :visible.sync="ContentDialog"
      :width="dialogWidth"
      @close="dialogClose"
    >
      <!-- 创建代理商门诊 -->
      <addAgent
        v-if="showDetail === 'add' || showDetail === 'edit'"
        ref="addAgentMsg"
        @changeContentDialog="changeContentDialog"
      ></addAgent>
      <!-- 取消合作 -->

      <div v-if="showDetail === 'stop'" class="contentBox">
        <h2 class="addAgentTitle">
          <img
            src="@/assets/images/warning.png"
            alt=""
          />你是否确认与该代理商暂停合作
        </h2>
        <el-checkbox v-model="checked"
          >暂停合作后代理商全部管理帐号将不可用</el-checkbox
        >
      </div>
      <!-- 合同 -->
      <contract
        v-if="showDetail === 'contract'"
        @agentAddContractFn="agentAddContractFn"
        ref="createContract"
      ></contract>
      <!-- 删除代理商 -->
      <div v-if="showDetail === 'delete'" class="contentBox">
        <img src="@/assets/images/warning.png" alt="" />确定删除所选数据吗？
      </div>
      <!-- 保存取消按钮 -->
      <div class="flexRight">
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button class="dialogBtn" round @click="ContentDialog = false"
              >取消</el-button
            >
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              class="dialogBtn"
              round
              @click="dialogSure"
              >保存</el-button
            >
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addAgent from "./components/addAgent";
import { PROCESS_EN_TYPE } from "@/utils/index";
import contract from "./components/contract";
import { getPageConf, agentPath, agentAddContract } from "@/api/agent";
import { getDictMap } from "@/api/system/dictDetail";
import { del } from "@/api/agent";
import CRUD, { presenter, header, crud } from "@crud/crud";
import pagination from "@crud/Pagination";
import { mapMutations, mapGetters } from "vuex";
import { edit, agentSearchId } from "@/api/agent";
export default {
  components: { addAgent, contract, pagination },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({
      title: "代理商管理",
      url: agentPath.getQuery,
      sort: "id,desc",
      serverPath: PROCESS_EN_TYPE.VUE_APP_SALEAREA_API,
      // crudMethod: { ...crudPatient },
      query: {
        id: "", //代理商编号
        agentName: "", //代理商名称
        startDate: "", //创建开始建
        status: "", //合作状态
      },
      props: { searchToggle: false },
      optShow: { add: false, download: false, reset: false },
      optRightShow: {
        search: false,
        refresh: false,
      },
    });
  },
  data() {
    return {
      btnStr: [
        "创建代理商门诊",
        "编辑代理商门诊",
        "暂停合作",
        "新增合同",
        "删除代理",
      ],

      ContentDialog: false,
      iptStyle: [
        {
          str: "代理商编号",
          icon: "el-icon-search",
        },
        {
          str: "代理商名称",
          icon: "el-icon-search",
          value: this.searchForm,
        },
        {
          str: "合作状态",
          icon: "el-icon-arrow-down",
        },
        {
          str: "是否签合同",
          icon: "el-icon-arrow-down",
        },
        {
          str: "创建合同",
          icon: "el-icon-date",
        },
      ],
      tableData: [
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
        {
          blocId: "LM4401DL190816200101",
          blocClinicName: "北京美中宜和门诊",
          clinicNature: "民营",
          blocAdmin: "管理员",
          billAdmin: "账单管理员",
          sign: "已签",
          deadline: "2019.09.09",
          packageRules: "",
          ProductRules: "",
        },
      ],
      title: "",
      multipleSelection: [],
      clickDisable: true,
      deleteDisable: true,
      showDetail: "add",
      dialogWidth: "860px",
      totalElements: "",
      groupStatus: [],
      agentDetail: {},
      checked: false,
    };
  },
  mounted() {
    // this.getTableData();
    getDictMap("contract_stat").then((e) => {
      this.contractStat = e.contract_stat;
    });
    getDictMap("group_status").then((e) => {
      this.groupStatus = e.group_status;
    });
  },
  watch: {
    multipleSelection: function (newVal, oldVal) {
      if (newVal.length === 0) {
        this.deleteDisable = true;
        this.clickDisable = true;
      } else if (newVal.length === 1) {
        this.deleteDisable = false;
        this.clickDisable = false;
      } else {
        this.clickDisable = true;
        this.deleteDisable = false;
      }
    },
  },
  methods: {
    ...mapMutations({
      CHANGE_LINKSEARCH: "settings/CHANGE_LINKSEARCH",
    }),
    blocDetail(row) {
      this.$router.push("agentDetails");
    },
    // 选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    disDialog(name) {
      this.ContentDialog = true;
      this.showDetail = name;
      if (name === "add") {
        this.title = "创建代理商门诊";
        this.dialogWidth = "860px";
        this.$nextTick(() => {
          this.$refs.addAgentMsg.addAgent();
        });
      } else if (name === "edit") {
        this.title = "编辑代理商门诊";
        this.dialogWidth = "860px";
        this.$nextTick(() => {
          this.$refs.addAgentMsg.getsendMsg(this.multipleSelection[0].id);
        });
      } else if (name === "stop") {
        this.title = "暂停合作";
        this.dialogWidth = "632px";
        this.getAgentId(this.multipleSelection[0].id);
      } else if (name === "contract") {
        this.title = "新增合同";
        this.dialogWidth = "1000px";
        this.$nextTick(() => {
          this.$refs.createContract.AddContract(this.multipleSelection[0].id);
        });
      } else {
        this.title = "删除代理商";
        this.dialogWidth = "632px";
      }
    },
    dialogSure() {
      switch (this.showDetail) {
        case "add":
          this.$refs.addAgentMsg.addFn();
          break;
        case "edit":
          this.$refs.addAgentMsg.editFn();
          break;
        case "stop":        
          if(this.checked){
            this.stopAgent();
          }else{
            this.ContentDialog=false
          }         
          break;
        case "delete":
          this.deleteDl();
          break;
        case "contract":
          this.$refs.createContract.addFn();

          break;
        default:
          break;
      }
    },
    changeContentDialog(val) {
      this.ContentDialog = val;
      this.crud.toQuery();
    },
    dialogClose() {},
    getTableData() {
      getPageConf(this.searchForm).then((res) => {
        this.tableData = res.content;
        this.totalElements = res.totalElements;
      });
    },
    //删除代理商函数
    deleteDl() {
      var arr = [];
      this.multipleSelection.forEach((item) => {
        arr.push(item.id);
      });
      del(arr).then((res) => {
        this.ContentDialog = false;
        this.crud.toQuery();
      });
    },
    //新建合同
    agentAddContractFn(data) {
      agentAddContract(data).then((res) => {
        console.log(res);
      });
    },
    //暂停合作
    stopAgent() {
      var data = this.agentDetail;
      delete data.createDate;
      delete data.updateDate;
      delete data.userId;
      data.status = 0;
      edit(data).then((res) => {
       this.toQuery()
       this.ContentDialog=false
       this.checked=false
      });
    },
    //通过id查询代理
    getAgentId(id) {
      agentSearchId(id).then((res) => {
        this.agentDetail = res;
      });
    },
  },
  mounted() {
    console.log("诊所管理linkSearch------", this.linkSearch);
  },
  destroyed() {
    this.CHANGE_LINKSEARCH("");
  },
};
</script>

<style lang='scss' scoped>
.top {
  width: 100%;
  height: 125px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.bottom {
  margin-top: 20px;
}
.flexLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flexRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flexLeft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px 0;
  > div {
    width: 23%;
  }
}
.contentBox {
  text-align: center;
  img {
    vertical-align: middle;
    width: 52px;
    height: 44px;
  }
}
</style>
